<template>
  <div>{{ str }}</div>
  <button @click="str = str + 1">修改str</button>
  <hr />
  <div>
    {{
      str
        .split('')
        .reverse()
        .join('') + '!'
    }}
  </div>
  <h3>{{ newStr }}</h3>
  <h3>{{ newStr }}</h3>
  <h3>{{ newStr }}</h3>
  <h3>{{ newStr }}</h3>
  <button @click="btnClick">设置计算属性</button>
</template>
<script>
import { ref, computed } from 'vue'
export default {
  setup () {
    const str = ref('abcdef')
    // const newStr = computed(() => {
    //   return (
    //     str.value
    //       .split('')
    //       .reverse()
    //       .join('') + '!!!!!!'
    //   )
    // })
    const newStr = computed({
      get () {
        return (
          str.value
            .split('')
            .reverse()
            .join('') + '!!!!!!'
        )
      },
      set (value) {
        console.log(value)
      }
    })
    function btnClick () {
      console.log(newStr)
      newStr.value = 'qwe'
    }
    return { str, newStr, btnClick }
  }
}
</script>
<style></style>
